<template>
  <div v-if="layoutType == 'double'" class="abs zx100 trbl0 f ac xc" style="background-color: rgba(0,0,0,.3);">
    <div class="rds10 f ac xc" :style="{background:'rgba(10,6,0,.6)',maxWidth:'192px',maxHeight:'155px',width: '192px', aspectRatio: '123/100'}">
      <div>
        <div class="f ac xc">
          <div class="fs40 gec6102">{{ type == 'time' ? ~~percent : `${progress}` }}<span class="fs14 pl2" style="transform:translateY(10px);">%</span></div>
        </div>
        <div class="gf">{{ text }}</div>
      </div>
    </div>
  </div>
  <div v-if="layoutType == 'single'" class="abs zx100 trbl0 f ac xc" style="background:rgba(0,0,0,.1)">
    <div class="loading"></div>
    <div class="abs l50 t50 txy-50 f ac xc">
      <div>
        <div class="fs26 gec6102">{{ type == 'time' ? ~~percent : `${progress}` }}<span class="fs14 pl2" style="transform:translateY(10px);">%</span></div>
        <div class="g0 fs10" style="transform:translateY(-10px)">
          {{ text }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
{/* <LoadPercent v-if="progress < 100 && progress > 0" text="..." type="progress" :progress="progress"></LoadPercent> */}
{/* <LoadPercent v-if="!isRobotInit && isGather" text="机械臂初始化中..." :second="5"></LoadPercent> */}
import f from "./index.js"
export default {
  components: {},
  props: {
    layoutType: { type: String, default: 'double' }, // single:单层loading、    double:双层loading
    type: { type: String, default: 'time' }, // type: 'time'代表传入时间进度     progress代表显示真实百分比
    text: { type: String, default: '模型分析中...' },
    second: { type: [Number, String], default: 10 }, // 耗时
    progress: { type: [Number, String], default: 0 }, // 进度百分比
    width:{ type: [String, Number], default: 192 }, // 进度百分比
  },
  emits: [],
  setup(props, { emit }) {
    return f(props, emit)
  }
}
</script>
<style src="./index.css" scoped></style>